
<template>
  <div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
    <a-steps v-show="(vdata.showStyle == showStyleEnum.step) && !isMobile" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="主体信息" />
      <a-step title="经营信息" />
      <a-step title="结算账户" />
      <a-step title="补充信息" />
      <a-step v-if="mchApplymentData.state != 3" title="支付类型及费率" />
    </a-steps>
    <a-divider v-show="!isMobile" />
    <a-divider v-show="isMobile" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;"><span style="color: #2980FD;">{{ vdata.currentStep }}</span>/{{ vdata.steps.length }} {{ vdata.steps[vdata.currentStep - 1] }}</a-divider>
    <!-- 1. 主体信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 1"
      ref="stepForm1Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step1Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">基础项</a-divider>
      <a-form-item label="商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType">
          <a-radio :value="2">个体工商户</a-radio>
          <a-radio :value="3">企业</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">营业执照</a-divider>

      <a-form-item label="执照类型" name="businessLicenseType">
        <a-select v-model:value="applymentDetailInfo.businessLicenseType" placeholder="执照类型">
          <a-select-option value="00">统一社会信用代码证号(三证合一)</a-select-option>
          <a-select-option value="01">营业执照(非三证合一)</a-select-option>
          <a-select-option value="02">其他</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="营业执照照片" name="licenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" :imgSize="1" ocrType="license" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 营业执照编号)</span>
      </a-form-item>

      <a-form-item label="营业执照编号" name="licenseNo">
        <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
      </a-form-item>
      
      <a-form-item label="法人姓名" name="legalPerson">
        <a-input v-model:value.trim="applymentDetailInfo.legalPerson" />
      </a-form-item>

      <a-form-item label="商户名称" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
      </a-form-item>

      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" />
        <span class="jeepay-tip-text">(15个汉字内)</span>
      </a-form-item>
      
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">联系人信息</a-divider>

      <a-form-item label="联系人身份证人像面照片" name="idcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" :imgSize="1" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
      </a-form-item>

      <a-form-item label="联系人身份证国徽面照片" name="idcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" :imgSize="1" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
      </a-form-item>

      <a-form-item label="联系人身份证姓名" name="idcardName">
        <a-input v-model:value.trim="applymentDetailInfo.idcardName" />
      </a-form-item>

      <a-form-item label="联系人身份证号" name="idcardNo">
        <a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
      </a-form-item>

      <a-form-item label="商户联系人手机号" name="contactPhone">
        <a-input v-model:value.trim="applymentDetailInfo.contactPhone" />
      </a-form-item>

      <a-form-item label="商户联系人邮箱" name="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail" />
      </a-form-item>
    </a-form>

    <!-- 2. 经营信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 2"
      ref="stepForm2Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step2Rules"
    >
      <a-form-item label="经营类目" name="mccCode">
        <JeepayMccSelect v-model:value="applymentDetailInfo.mccCode" @change="changeMccFunc" />
      </a-form-item>

      <a-form-item label="商户经营省市县" name="areaCode">
        <JeepayAreaSelectYsf v-model:value="applymentDetailInfo.areaCode" />
      </a-form-item>

      <a-form-item label="商户经营地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" />
      </a-form-item>

      <a-form-item label="客服电话" name="customerPhone">
        <a-input v-model:value.trim="applymentDetailInfo.customerPhone" />
      </a-form-item>

      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" :imgSize="1" bizType="applyment" />
      </a-form-item>

      <a-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" :imgSize="1" bizType="applyment" />
      </a-form-item>
    </a-form>

    <!-- 3. 结算账户  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 3"
      ref="stepForm3Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step3Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">账户信息</a-divider>
      <a-form-item label="账户类型" name="settAccountType">
        <a-radio-group v-model:value="applymentDetailInfo.settAccountType" @change="() => emit('itemRender')">
          <a-radio value="C">个人</a-radio>
          <a-radio value="B">企业</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="是否为负责人信息" name="isContactInfo">
        <a-radio-group v-model:value="applymentDetailInfo.isContactInfo" @change="funSettInfo(applymentDetailInfo.isContactInfo)">
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="银行开户名" name="settAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName" />
        <span class="jeepay-tip-text">如：张三</span>
      </a-form-item>
        
      <div v-if="applymentDetailInfo.settAccountType == 'C'">
        <a-form-item label="持卡人身份证号" name="settAccountIdcardNo">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardNo" />
        </a-form-item>
      </div>

      <a-form-item label="银行预留手机号" name="bankCardPhone">
        <a-input v-model:value.trim="applymentDetailInfo.bankCardPhone" />
      </a-form-item>

      <a-form-item label="银行卡照片" name="settAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" :imgSize="1" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
      </a-form-item>

      <a-form-item label="银行账号" name="settAccountNo">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountNo" />
      </a-form-item>

      <a-form-item label="开户行省市县" name="settAccountBankBranchAreaCode">
        <JeepayAreaSelectYsf v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode" />
      </a-form-item>

      <a-form-item label="开户行支行名称" name="settAccountBankBranchName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountBankBranchName" />
        <span><a href="https://up.95516.com/open/openapi/doc?index_1=123&index_2=1&chapter_1=1880&chapter_2=1966" target="_blank">支行名称、联行号及开户支行名称查询（下载附件）</a></span>
      </a-form-item>
      
      <a-form-item label="开户银行ID" name="bankId">
        <a-input v-model:value.trim="applymentDetailInfo.bankId" />
      </a-form-item>

      <a-form-item label="联行行号" name="contactLine">
        <a-input v-model:value.trim="applymentDetailInfo.contactLine" />
      </a-form-item>
    </a-form>

    <!-- 4. 其他信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 4"
      ref="stepForm4Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      :rules="vdata.step4Rules"
    >
      <a-row>
        <a-col :span="isMobile ? 24 : 12">
          <a-form-item label="商户协议照片1" name="protocolPhoto1" :label-col="{ span: 8 }">
            <JeepayUpload v-model:src="applymentDetailInfo.protocolPhoto1" :imgSize="1" bizType="applyment" />
          </a-form-item>
        </a-col>
        <a-col :span="isMobile ? 24 : 12">
          <a-form-item label="商户协议照片2" name="protocolPhoto2">
            <JeepayUpload v-model:src="applymentDetailInfo.protocolPhoto2" :imgSize="1" bizType="applyment" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="isMobile ? 24 : 12">
          <a-form-item label="商户协议照片3" name="protocolPhoto3" :label-col="{ span: 8 }">
            <JeepayUpload v-model:src="applymentDetailInfo.protocolPhoto3" :imgSize="1" bizType="applyment" />
          </a-form-item>
        </a-col>
        <a-col :span="isMobile ? 24 : 12">
          <a-form-item label="商户协议照片4" name="protocolPhoto4">
            <JeepayUpload v-model:src="applymentDetailInfo.protocolPhoto4" :imgSize="1" bizType="applyment" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="组织机构代码证照片" name="orgPhoto">
        <JeepayUpload v-model:src="applymentDetailInfo.orgPhoto" :imgSize="1" bizType="applyment" />
      </a-form-item>

      <a-form-item label="其他资料照片" name="otherDoc">
        <JeepayUpload v-model:src="applymentDetailInfo.otherDoc" :imgSize="1" bizType="applyment" />
      </a-form-item>
    </a-form>

    <!-- 5. 其他信息  -->
    <template v-if="mchApplymentData.state != 3">
      <a-form
        v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 5"
        ref="stepForm5Ref"
        :model="applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        :rules="vdata.step5Rules"
      >
        <JeepayPaywayRatePanel 
          ref="jeepayPaywayRatePanelRef" 
          :configMode="configMode"
          :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo" 
          :selectIfCode="mchApplymentData.ifCode" 
          onlyRate="true"
        />
      </a-form>
    </template>

    <a-divider />

    <div class="jeepay-btn-box jeepay-m-btn-box" style="margin-top: 50px; margin-bottom: 50px;text-align: center;">
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep > 1" class="jeepay-m-btn" data-type="inline" type="primary" @click="toPrevStep"><left-circle-outlined /> 上一步 </a-button>
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep < (mchApplymentData.state != 3 ? 5 : 4)" class="jeepay-m-btn" data-type="inline" type="primary" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {reactive, getCurrentInstance, defineEmits, inject, ref} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const jeepayPaywayRatePanelRef = ref()

// 显示类型枚举值
const showStyleEnum = {
  step: 'step',
  block: 'block'
}

// emit： 向父组件进行通讯。 
const emit = defineEmits(['itemRender'])

// 参数注入： 是否手机端
let isMobile : any = inject('isMobile')

// 响应式数据
const vdata : any = reactive({
  showStyle: 'step', // 显示类型： step-分步,  block-整页显示 
  steps: ['主体信息', '经营信息', '结算账户', '补充信息'],
  isTempData: false, // 是否保存草稿
  payWayFee : '未设置',
  currentStep: 1,
  step1Rules: {
                merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
                businessLicenseType: [ ruleGenerator.requiredSelect('执照类型', 'string') ],
                licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
                licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
                idcard1Img: [ ruleGenerator.requiredUpload('身份证人像面照片') ],
                idcard2Img: [ ruleGenerator.requiredUpload('身份证国徽面照片') ],
                mchFullName: [ ruleGenerator.requiredInput('商户名称') ],
                mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
                idcardName: [ ruleGenerator.requiredInput('身份证中的姓名') ],
                idcardNo: [ ruleGenerator.requiredInput('身份证号') ],
                contactPhone: [ ruleGenerator.requiredInput('联系人手机号') ],
                contactEmail: [ ruleGenerator.requiredInput('联系人邮箱') ],
                legalPerson: [ ruleGenerator.requiredInput('法人姓名') ],
              },
  step2Rules: {
                mccCode: [ ruleGenerator.requiredSelect('行业') ],
                areaCode: [ ruleGenerator.requiredSelect('位置编码', 'array') ],
                address: [ ruleGenerator.requiredInput('经营地址') ],
                customerPhone: [ ruleGenerator.requiredInput('客服电话') ],
                storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
  },
  step3Rules: {
                settAccountType: [ ruleGenerator.requiredSelect('账户类型') ],
                isContactInfo: [ ruleGenerator.requiredSelect('负责人信息') ],
                settAccountNo: [ ruleGenerator.requiredInput('银行帐号') ],
                settAccountName: [ ruleGenerator.requiredInput('开户名') ],
                bankCardPhone: [ ruleGenerator.requiredInput('银行预留手机号') ],
                settAccountBankBranchAreaCode: [ ruleGenerator.requiredSelect('开户行省市县', 'array') ],
                contactLine: [ ruleGenerator.requiredInput('联行行号') ],
                bankId: [ ruleGenerator.requiredInput('开户银行ID') ],
  },
  step4Rules: {
          
  },
  step5Rules: {
          
  }
  
})

// 接收进件参数（包含 商户号， ifCode ）
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value

// 参数注入： 配置方式
let configMode : any = inject('configMode')


// 下一步
function toNextStep() {
  // 验证是否通过
  proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
      vdata.currentStep ++
  })
}

// 上一步
function toPrevStep(){
  vdata.currentStep --
}

function funSettInfo(value) {
  if(value == '1'){
    // 联系人身份证姓名
    applymentDetailInfo.settAccountName = applymentDetailInfo.idcardName
    // 联系人身份证号
    applymentDetailInfo.settAccountIdcardNo = applymentDetailInfo.idcardNo
    // 联系人手机号
    applymentDetailInfo.bankCardPhone = applymentDetailInfo.contactPhone
  }else {
    // 联系人身份证姓名
    applymentDetailInfo.settAccountName = ''
    // 联系人身份证号
    applymentDetailInfo.settAccountIdcardNo = ''
    // 联系人手机号
    applymentDetailInfo.bankCardPhone = ''
  }
}

function validateAllForm(step: number){
  return proxy.$refs['stepForm'+step+'Ref'].validate().then( () => {
     if(step >= 4){
      return Promise.resolve()
     }
     return validateAllForm(++step)
     
  })
}

// 图片识别的回调函数
function ocrScanFunc(orcObject: any){
  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)
  }
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp){

  // 判断下： 是否包含该组件， 若没有该组件（比如分账模式下）， 则无需获取此费率数据
  if(jeepayPaywayRatePanelRef.value){

    // 放置费率配置项
    let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
      if(typeof(paywayFeeList) != 'object'){
        return Promise.reject()
      }

      // 赋值到对象中
      applymentDetailInfo.reqPaywayFeeList = paywayFeeList

  }

  // 保存草稿只校验当前步骤数据
  if (isTemp) {
    return Promise.resolve()
  }

  // 验证所有表单
  return validateAllForm(1).then(() => {
    return Promise.resolve()
  }).catch((params: any) => {
    $infoBox.message.error('数据填写不完整， 请检查后提交')
    return Promise.reject()
  })
}

// 行业编码选择
function changeMccFunc (value) {
  if(value[1] && value[1].licenseCode) {
      applymentDetailInfo.industryQualificationType = value[1] && value[1].licenseCode
  }else{
    applymentDetailInfo.industryQualificationType = ''
  }
}

defineExpose({ saveDataPreCallback })

</script>

<style lang="less" scoped>
.jeepay-tip-text{
  font-size: 10px; color: rebeccapurple
}
.option-left {
  width: 50%;
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
}
.option-right {
  color: rgb(153, 153, 153);
}
.option-bottom {
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
  color: rgb(153, 153, 153);
}
.jeepay-btn-box {
  margin: 15px -12px !important;
}
.jeepay-btn-box .ant-btn {
  margin: 0 10px;
}
</style>